<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        audio {
            width: 700px;
            height: auto;
            margin: 10px auto;
            background-color: white;
            filter: alpha(opacity:30);
            opacity: 0.6;
        }

        #play {
            width: 800px;
            margin: auto auto;
            text-align: center;
        }

        #table {
            width: 900px;
            margin: 10px auto;
        }

        #searchtable {
            width: 900px;
            margin: 10px auto;
        }
        a{
            color:white;
        }
        .playBtn {
            width: 20px;
            height: 20px;
        }

        #namespace {
            margin-left: 50px;
        }
    </style>
</head>
<body style="background:url(../img/bg.jpg);background-position:top center">
<span id="namespace">
    欢迎您：<a href="#" id="name"></a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="/likePage">我的收藏夹</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a onclick="out()">退出</a>
</span>
<hr>
<div id="searchtable" style="margin-top:150px;padding-bottom: 80px;">
    <div class="col-lg-12 ">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="输入歌曲名/歌手名/专辑名以查找" id="searchcontent">
            <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="search">查找</button>
        <button class="btn btn-default" type="button" id="searchInInternet">站外查找</button>
      </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div>


<table id="table" class="table table-striped  .table-hover" style="background-color:#dcdcdd;opacity: 0.8;">
    <!--<thead>-->
    <!--<tr>-->
        <!--<td>歌曲名</td>-->
        <!--<td>演唱者</td>-->
        <!--<td>专辑</td>-->
        <!--<td>试听</td>-->
        <!--<td>下载</td>-->
        <!--<td>评论</td>-->
        <!--<td>收藏</td>-->
    <!--</tr>-->
    <!--</thead>-->
    <tbody>

    </tbody>
</table>
<div style="position:fixed;bottom: 0px;text-align: center;width: 100%;">
<div id="play">
    <audio controls="controls" id="player">
        您的浏览器版本过低，请升级浏览器或更换浏览器尝试
    </audio>
</div>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script>

    $.ajax({
        url: "/getname",
        type: "post",
        success: function (result) {
            if (result.msg === "成功") {
                $("#name").html(result.data.toString())
            }
        }
    });

    function search() {
        $.ajax({
            url: "/getsongs",
            type: "post",
            data: {
                songname: $("#searchcontent").val()
            },
            success: function (result) {
                if (result.msg === "成功") {
                    $("tbody").html("");
                    var list = result.data;
                    for (var i in list) {
                        var url = list[i].url;
                        var songName = list[i].name;
                        var author = list[i].author;
                        var album = list[i].album;
                        $("tbody").append("<tr>" +
                            "<td>" + songName + "</td>" +
                            "<td>" + author + "</td>" +
                            "<td>" + album + "</td>" +
                            "<td>" +
                            "<img src='../img/icon/music.png' alt='播放按钮' onclick='clickPlay(" + url + ")' class='playBtn'>" +
                            "</td>" +
                            "<td>" +
                            "<img src='../img/icon/download.png' alt='下载按钮' onclick='download(\"" + songName + "\"," + url + ")' class='playBtn'>" +
                            "</td>" +
                            "<td>" +
                            "<img src='../img/icon/commit.png' alt='评论按钮' onclick='' class='playBtn'>" +
                            "</td>" +
                            "<td>" +
                            "<img src='../img/icon/like.png' alt='评论按钮' onclick='' class='playBtn'>" +
                            "</td>" +
                            "</tr>"
                        )
                    }
                } else {
                    alert("您访问的资源不存在！！！")
                }
            }
        })
    }

    function searchInner() {
        $.ajax({
            url: "/searchInner",
            type: "post",
            data: {
                songName: $("#searchcontent").val()
            },
            success: function (result) {
                if (result.msg === "成功") {
                    $("tbody").html("");
                    var list = result.data;
                    for (var i in list) {
                        var url = list[i].url;
                        var songName = list[i].name;
                        var author = list[i].author;
                        var album = list[i].album;
                        $("tbody").append("<tr>" +
                            "<td>" + songName + "</td>" +
                            "<td>" + author + "</td>" +
                            "<td>" + album + "</td>" +
                            "<td>" +
                            "<img src='../img/icon/music.png' alt='播放按钮' onclick='clickPlay(" + url + ")' class='playBtn'>" +
                            "</td>" +
                            "<td>" +
                            "<img src='../img/icon/download.png' alt='下载按钮' onclick='download(\"" + songName + "\"," + url + ")' class='playBtn'>" +
                            "</td>" +
                            "<td>" +
                            "<img src='../img/icon/commit.png' alt='评论按钮' onclick='' class='playBtn'>" +
                            "</td>" +
                            "<td>" +
                            "<img src='../img/icon/like.png' alt='评论按钮' onclick='' class='playBtn'>" +
                            "</td>" +
                            "</tr>"
                        )
                    }
                } else {
                    alert("您访问的资源不存在！！！")
                }
            }
        })
    }

    //按钮点击站外搜索
    $("#searchInInternet").click(function () {
        search()
    });

    //点击搜索
    $("#search").click(function () {
        alert("站内搜索")
        searchInner();
    });

    //回车点击搜索
    document.onkeydown = function (event) {
        var e = event ? event : (window.event ? window.event : null);
        if (e.keyCode == 13) {
            search();
        }
    };

    //点击播放
    function clickPlay(songId) {
        var url = "http://link.hhtjim.com/kw/" + songId;
        $("#player").attr("src", url);
        $("#player").attr("autoplay", "autoplay");
        $("#player").attr("loop", "loop");
    }


    //点击下载
    function download(songName, songId) {
        window.location.href = "/downloadMusic?songName=" + songName + "&songId=" + songId;
    }

    function out() {
        window.location.href = "/logout";
//        window.location.href = "/login";
    }
</script>

</body>
</html>